<template>
  <div class="container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="未读公告" name="first">
        <un-reading-announcement v-if="isFirst" />
      </el-tab-pane>
      <el-tab-pane label="已读公告" name="second">
        <reading-announcement v-if="isSecond" />
      </el-tab-pane>
      <el-tab-pane label="个人公告" name="third">
        <personal-announcement v-if="isThird" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import UnReadingAnnouncement from "./components/unReadingAnnouncement.vue";
import readingAnnouncement from "./components/readingAnnouncement.vue";
import personalAnnouncement from './components/personalAnnouncement.vue'
export default {
  name: "Announcement",
  components: { UnReadingAnnouncement, readingAnnouncement, personalAnnouncement },
  data() {
    return {
      activeName: "first",
      isFirst: true,
      isSecond: false,
      isThird: false,
    };
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name === "first") {
        this.isFirst = true;
        this.isSecond = false;
        this.isThird = false;
      } else if (tab.name === "second") {
        this.isFirst = false;
        this.isSecond = true;
        this.isThird = false;
      } else if (tab.name === "third") {
        this.isFirst = false;
        this.isSecond = false;
        this.isThird = true;
      }
    },
  },
};
</script>

<style scoped>
.container {
  margin-left: 60px;
  margin-right: 60px;
}
</style>